<template>
  <div class="main" ref="questionBgk">
      <div class="box-center-all">
        <div class="top-header">
          <div class="left-icon" @click="exitQuestion">
            <img src="@/assets/images/loginOut.png" alt="">
          </div>
          <div class="label">{{ $t('题目') }}：</div>
          <span>{{ answeredIndex+1 }}/{{ formData.questionNum }}</span>
          <van-count-down @finish="finishTime" class="timrs" :time="time" />
        </div>
        <div class="bottom-box"
             v-if="index === answeredIndex"
             v-for="(item,index) in questionArray"
             :key="index">

            <div class="q">
              {{item.content}}
            </div>
            <div class="option">
              <div class="item"
                   :class="{active:index1 === choseItem.index}"
                   @click="changeAnswer(item,index1)"
                   v-for="(item1,index1) in item.shuffledOptions"
                   :key="index1"
              >{{optionValue(index1)}}. {{item1}}</div>
            </div>
        </div>

        <div class="box-item">
          <div class="button11" @click="nextQuestion">{{$t('下一步')}}</div>
        </div>
      </div>
  </div>
</template>

<script>
import {Dialog, Toast} from "vant";
import {answerList, exitAnswer, getQuestionAct, submitAnswers, userDetail} from "@/api/apiFox";

  export default {
    data() {
      return {
        time: 290000000,
        answeredIndex:0, //已经答题
        answerArray:[], //回答列表
        questionArray:[], //问题列表
        formData:{}, //基本信息
        isLogin:false,
        userInfo:{}, //用户信息
        choseItem:{
          index:'',
          keyword:''
        }, //选中的id
        queryParams:{
          pageSize:1,
          pageNum:1,
          questionNum:0
        }
      };
    },
    methods:{
      optionValue(item){
        switch (item){
          case 0:{
            return 'A'
          }
          case 1:{
            return 'B'
          }
          case 2:{
            return 'C'
          }
          case 3:{
            return 'D'
          }
        }
      },
      getQuestion(){
        answerList(this.queryParams).then(res=>{
          console.log(res)
          if (res.lists && res.lists.length>0){
            this.questionArray= res.lists
          }else{
            this.questionArray={}
          }

        }).catch(err=>{})
      },

      changeAnswer(item,index){
        console.log(item)
        this.choseItem.index = index
        this.questionArray.forEach(value => {
            if (value.id === item.id ){
              value.userChoose = index
            }
        })
      },

      submitQuestion(item){
        submitAnswers({answerList:item}).then(res=>{
          if (res>0){
            this.$router.push({path:'/error',query:{num:res}}).catch(err=>{})
          }else{
            this.$router.push('/success').catch(err=>{})
          }
        }).catch(err=>{})
      },

      nextQuestion(){
        console.log(this.questionArray)
        if (this.answeredIndex+1 >=this.formData.questionNum){
          console.log('this',this.questionArray)
          this.submitQuestion(this.questionArray)
        }else{
          let form = this.questionArray[this.answeredIndex]
          console.log(form)
          if (form.userChoose!==""){
            this.answeredIndex+=1
            this.choseItem.index = ""
          }else{
            Toast(this.$t('请选择答案后进入下一题'))
          }
        }

      },

      finishTime(){
        Dialog.alert({
          title: this.$t('提示'),
          message: this.$t('答题时间已用完'),
          confirmButtonText:this.$t('确定')
        }).then(() => {
          this.submitQuestion(this.questionArray)
          this.$router.push('/').catch(err=>{})
        });
      },
      getFirst(){
        getQuestionAct().then(res=>{
          console.log(res)
          this.$refs.questionBgk.style.background=`url(${res.pageBackgroundImg}) no-repeat`
          this.$refs.questionBgk.style.backgroundSize=`100% 100%`
          this.formData = res
          this.queryParams.questionNum = res.questionNum
          this.queryParams.pageSize = res.questionNum
          this.getQuestion()
          // Dialog.alert({
          //   title: this.$t('提示'),
          //   message: this.$t('请在规定的时间范围内')+this.formData.timeLimit+this.$t('时间答完每道题'),
          //   confirmButtonText:this.$t('确定')
          // }).then(() => {
          //   this.time = this.formData.timeLimit*1000
          //   this.getQuestion()
          // });
        }).catch(err=>{})

      },
      exitQuestion(){
        Dialog.confirm({
          title: this.$t('提示'),
          message: this.$t('中途退出答题次数也会扣除，是否继续'),
          cancelButtonText:this.$t('取消'),
          confirmButtonText:this.$t('确定'),
        })
            .then(() => {
              exitAnswer().then(res=>{
                this.$router.push('/').catch(err=>{})
              }).catch(err=>{})

            })
            .catch(() => {
              // on cancel
            });
      },
      getUserInfo() {
        if (this.isLogin) {
          userDetail().then(res => {
            this.userInfo = res
          }).catch(err => {})
        } else {
          this.$router.push('/').catch(err=>{})
        }
      },
    },
    mounted() {
      this.getFirst()

    },
    created() {
      let s = localStorage.getItem('accessKey')
      let d = sessionStorage.getItem('userInfo')
      if (s && d) {
        this.isLogin = true
      } else {
        this.isLogin = false
      }
      this.getUserInfo()
    }
  }
</script>

<style scoped lang="scss">
.main{
  font-size: 14px;
  background: url("@/assets/images/bgk.jpg") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  min-height: 100vh;

  .box-center-all{
    width: 100%;
    min-height: 100vh;
    padding-top: 45px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); // 兼容 Safari
    position: absolute;
    .top-header{
      width: 100%;
      position: absolute;
      height: 60px;
      top: 0;
      left: 0;
      background: rgba(44,119,117,0.9);
      pointer-events: auto;
      font-family: 'Fugaz One', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
      .left-icon{
        width: 100px;
        display: flex;
        justify-content: left;
        position: absolute;
        left: 20px;
        pointer-events: auto;
        img{
          height: 20px;
        }
      }
      .label{
        font-size: 14px;
      }
    }
    .bottom-box{
      width: 100%;
      padding-top: 30px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;

      .q{
        width: 100%;
        border-radius: 10px;
        min-height: 100px;
        background: rgba(44,119,117,0.9);
        padding: 20px;
        box-sizing: border-box;
        font-size: 18px;
        color: #fff;
        font-family: 'HFLittleStars', sans-serif;
      }
      .option{
        width: 100%;
        border-radius: 10px;
        min-height: 100px;

        margin-top: 30px;
        .item{
          width: 100%;
          min-height: 50px;
          background: rgba(44,119,117,0.9);
          border-radius: 10px;
          display: flex;
          align-items: center;
          padding:10px;
          box-sizing: border-box;
          font-size: 18px;
          color: #fff;
          font-family: 'HFLittleStars', sans-serif;
          margin-bottom: 10px;
          &.active{
            background: #2080e5;
          }
        }
      }
    }
    .box-item{
      width: 100%;
      height: 100px;
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 10px;
      box-sizing: border-box;
      .button11{
        width: 100%;
        height: 50px;
        background: rgba(33,255,79,0.71);
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Fugaz One', sans-serif ;
        color: #fff;
      }
    }
  }

.timrs{
  color: #fff;
  margin-left: 10px;
}
}
</style>
